<template>
  <div class="container">
    <h1>{{ companyInfo.name }}</h1>
    <hr />
    <p>{{ companyInfo.description }}</p>
    <hr />
    <ul >
      <li><strong>公司商标: </strong><img class="brand" :src="require('@/assets/images/brand/'+companyInfo.brand)" /></li>
    </ul>
    <hr />
    <ul>
      <li><strong>公司ID: </strong>{{ companyInfo.id }}</li>
      <li><strong>公司规模: </strong>{{ companyInfo.size }}</li>
      <li><strong>公司状态: </strong>{{ companyInfo.status === 0? '正常' : '其他状态' }}</li>
      <hr />
      <li><strong>营业执照: </strong><img class="licence" :src="require('@/assets/images/license/'+companyInfo.license)" /></li>
    </ul>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";

export default {
  name: 'CompanyEcho',
  data() {
    return {
      companyInfo: [],
      ownerId: '',
    };
  },
  methods: {
    fetchCompanyInfo() {
      axios.get(`/api/company/find/${this.ownerId}`).then(resp => {
        this.companyInfo = resp.data;
      }).catch(err => {
        console.log(err);
      })
    }
  },
  mounted() {
    this.ownerId = this.$route.query.ownerId;
    this.fetchCompanyInfo();
  },
};
</script>

<style scoped>
.brand{
  width: 100px;
  height: 100px;
}
.licence{
  width: 200px;
  height: 100px;
}
hr {
  border: none;
  border-top: 1px solid #ccc;
  width: 100%;
  margin: 0;
}
li {
  display: flex;
  align-items: center; /* 让文字和图片在垂直方向居中对齐 */
}

li strong {
  line-height: 50px; /* 将行高设置为和图片高度一样，可根据具体图片高度调整该值 */
}
.container {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  color: purple;
}

.source img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

</style>
